<template>
  <div>
    <div ref="login" class="login">
      <p>请输入昵称：<input v-model="value" type="text" /></p>
      <button @click="login">登陆</button>
      <div>{{ msg }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "",
      value: "",
    };
  },
  mounted() {
    this.$nextTick(()=>{
      this.$refs.login.appendChild(Poker.getCardImage(60,'hearts','q'))
    })
  },
  methods: {
    // 登陆
    login() {
          // bus.$emit('user',"11222222222222222222222")
      if(this.value == '') return this.msg = '请输入昵称'
      this.$socket.emit("login", this.value);
      this.$socket.on("login", (data) => {
        this.msg = data.msg;
        let _this = this;
        window.localStorage.setItem('user',JSON.stringify(data.user))
        if (data.code == 0) {
          // bus.$emit('user',data.user)  
          setTimeout(function () {
            _this.$router.push({path:"/player",query:{user:data.user}});
          }, 2000);
        }
      });
    },
  },
};
</script>
<style lang="stylus">
body{
  background-color: #ccc;
}
  .login{
    width: 400px;
    height: 200px;
    border: #ccc solid 1px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background-color: rgb(68, 126, 173);
  }
  p{
    margin-top: 50px;
  }
</style>